---
title: Breadcrumbs
description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
links:
  - label: Aria docs
    href: https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/navigation/breadcrumbs.mdx?plain=1
---

<ComponentPreview
  name="breadcrumbs/demos/basic"
  preview={`<Breadcrumbs>
    <Breadcrumb href="#">Home</Breadcrumb>
    <Breadcrumb href="#">Components</Breadcrumb>
    <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
  </Breadcrumbs>`}
/>

## Installation

```package-install
npx shadcn@latest add @dotui/breadcrumbs
```

## Anatomy

Breadcrumbs consist of a list of links, typically with a visual separator icon between each item. The last link represents the current page in the hierarchy, with the previous links representing the parent pages of the current page.

```tsx
import { Breadcrumb, Breadcrumbs } from "@/components/core/breadcrumbs";

<Breadcrumbs>
  <Breadcrumb href="#">Home</Breadcrumb>
  <Breadcrumb href="#">Components</Breadcrumb>
  <Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>;
```

```tsx
import { ChevronRightIcon } from "your-icon-library";

import {
  BreadcrumbItem,
  BreadcrumbLink,
  Breadcrumbs,
} from "@/components/core/breadcrumbs";

<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
    <ChevronRightIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Components</BreadcrumbLink>
    <ChevronRightIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumbs>;
```

## Options

### Disabled

Use the `isDisabled` prop to disable the breadcrumbs.

<ComponentPreview
  name="breadcrumbs/demos/disabled"
  preview={`<Breadcrumbs isDisabled>
    <Breadcrumb href="#">Home</Breadcrumb>
    <Breadcrumb href="#">Components</Breadcrumb>
    <Breadcrumb>Breadcrumbs</Breadcrumb>
  </Breadcrumbs>`}
/>

## Composition

If you need to customize things further, you can drop down to the composition level.

<ComponentPreview
  name="breadcrumbs/demos/composition"
  preview={`<Breadcrumbs>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
      <ChevronRightCircleIcon />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
      <ChevronRightCircleIcon />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
      <ChevronRightCircleIcon />
    </BreadcrumbItem>
  </Breadcrumbs>`}
/>

## Examples

### Icon

<ComponentPreview
  name="breadcrumbs/demos/icon"
  preview={`<Breadcrumbs>
    <Breadcrumb href="#">
      <HomeIcon />
      Home
    </Breadcrumb>
    <Breadcrumb href="#">Components</Breadcrumb>
    <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
  </Breadcrumbs>`}
/>

### Router integration

<ComponentPreview
  name="breadcrumbs/demos/router-integration"
  preview={`const pathname = usePathname();
  const pathnames = pathname.split("/").filter((x) => x);
  return (
    <Breadcrumbs>
      {pathnames.map((elem, index) => {
        const href = \`/\${pathnames.slice(0, index + 1).join("/")}\`;
        return (
          <Breadcrumb key={elem} href={href} className="capitalize">
            {elem}
          </Breadcrumb>
        );
      })}
    </Breadcrumbs>
  );`}
/>

## API Reference

### Breadcrumbs

| Prop           | Type                                  | Default | Description                                                                  |
| -------------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------- |
| `isDisabled`   | `boolean`                             | -       | Whether the breadcrumbs are disabled.                                        |
| `items`        | `boolean`                             | -       | Item objects in the collection.                                              |
| `dependencies` | `boolean`                             | -       | Values that should invalidate the item cache when using dynamic collections. |
| `children`     | `ReactNode \| (item: T) => ReactNode` | -       | The contents of the collection.                                              |
| `className`    | `string`                              | -       | The CSS className for the element.                                           |
| `style`        | `CSSProperties`                       | -       | The inline style for the element.                                            |

| Event      | Type                 | Description                                          |
| ---------- | -------------------- | ---------------------------------------------------- |
| `onAction` | `(key: Key) => void` | Handler that is called when a breadcrumb is clicked. |

### Breadcrumb

| Prop             | Type                                                                                                    | Default | Description                                                                                               |
| ---------------- | ------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| `id`             | `boolean`                                                                                               | -       | A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.          |
| `isDisabled`     | `boolean`                                                                                               | -       | Whether the link is disabled.                                                                             |
| `autoFocus`      | `boolean`                                                                                               | -       | Whether the element should receive focus on render.                                                       |
| `href`           | `Href`                                                                                                  | -       | A URL to link to.                                                                                         |
| `hrefLang`       | `string`                                                                                                | -       | Hints at the human language of the linked URL.                                                            |
| `target`         | `HTMLAttributeAnchorTarget`                                                                             | -       | The target window for the link.                                                                           |
| `rel`            | `string`                                                                                                | -       | The relationship between the linked resource and the current page.                                        |
| `download`       | `boolean \| string`                                                                                     | -       | Causes the browser to download the linked URL. A string may be provided to suggest a file name.           |
| `ping`           | `string`                                                                                                | -       | A space-separated list of URLs to ping when the link is followed.                                         |
| `referrerPolicy` | `HTMLAttributeReferrerPolicy`                                                                           | -       | How much of the referrer to send when following the link.                                                 |
| `routerOptions`  | `RouterOptions`                                                                                         | -       | Options for the configured client side router.                                                            |
| `children`       | `ReactNode \| (values: BreadcrumbRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | -       | The children of the component. A function may be provided to alter the children based on component state. |
| `className`      | `string`                                                                                                | -       | The CSS className for the element.                                                                        |
| `style`          | `CSSProperties`                                                                                         | -       | The inline style for the element.                                                                         |

| Event           | Type                              | Description                                                                                                             |
| --------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `onPress`       | `(e: PressEvent) => void`         | Handler that is called when the press is released over the target.                                                      |
| `onPressStart`  | `(e: PressEvent) => void`         | Handler that is called when a press interaction starts.                                                                 |
| `onPressEnd`    | `(e: PressEvent) => void`         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.     |
| `onPressChange` | `(isPressed: boolean) => void`    | Handler that is called when the press state changes.                                                                    |
| `onPressUp`     | `(e: PressEvent) => void`         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `onFocus`       | `(e: FocusEvent<Target>) => void` | Handler that is called when the element receives focus.                                                                 |
| `onBlur`        | `(e: FocusEvent<Target>) => void` | Handler that is called when the element loses focus.                                                                    |
| `onFocusChange` | `(isFocused: boolean) => void`    | Handler that is called when the element's focus status changes.                                                         |
| `onKeyDown`     | `(e: KeyboardEvent) => void`      | Handler that is called when a key is pressed.                                                                           |
| `onKeyUp`       | `(e: KeyboardEvent) => void`      | Handler that is called when a key is released.                                                                          |
| `onHoverStart`  | `(e: HoverEvent) => void`         | Handler that is called when a hover interaction starts.                                                                 |
| `onHoverEnd`    | `(e: HoverEvent) => void`         | Handler that is called when a hover interaction ends.                                                                   |
| `onHoverChange` | `(isHovering: boolean) => void`   | Handler that is called when the hover state changes.                                                                    |

| Data attribute    | Description                                     |
| ----------------- | ----------------------------------------------- |
| `[data-disabled]` | Whether the breadcrumb is disabled.             |
| `[data-current]`  | Whether the breadcrumb is for the current page. |
